<template>
    <fieldset>
        <legend>过渡动画</legend>
        <button @click="handleClick">点击</button>
        <transition enter-active-class="animate__animated animate__rubberBand" 
        leave-active-class="animate__animated animate__bounceOutDown"
        >
            <h1 v-if="flag">您看不见我</h1>
        </transition>
    </fieldset>
</template>
<script>
//触发动画的场景
//1.v-if

//2.v-show

//3.动态组件 is
import "animate.css"
export default {
    data() {
        return {
            flag: true
        }
    },
    methods: {
        handleClick() {
            this.flag = !this.flag
        }
    }
}
</script>
<style scoped>
h1 {
    width: 200px;
    border: 2px dashed hotpink
}
</style>